<template>
    <div v-if="tree != ''">
        <div v-for="(item, index) in tree" :key="index" style="padding-left: 30px;">
            <table border="0" cellpadding="0" cellspacing="0" align="left"
                style="background-color: rgb(250, 249, 248);width:90%;margin:5px" @click="send(item)">
                <tr>
                    <td rowspan="2" width="55px">
                        <div
                            style="width: 55px;height:55px;    border:1px solid black;border-radius:50%;text-align:center;line-height: 55px;">
                            头像
                        </div>
                    </td>
                    <td><b>{{ item.nickname }}</b>&nbsp;<span style="font-size: 13px;">{{ formatDate(item.createDate) }}</span></td>
                </tr>
                <tr>
                    <td>
                        <span style="font-size: 14px;">
                            {{ item.message }}
                        </span>
                    </td>
                </tr>
            </table>
            <traverseMessage :tree="item.children" v-if="item.children" v-on:userMessage="send"></traverseMessage>
        </div>

    </div>
</template>
<script>
export default {
    name: "traverseMessage",
    props: {
        tree: {
            type: Array
        }
    },
    data() {
        return {

        }
    },
    methods: {
        send(item) {
            console.log("子组件点击", item)
            this.$emit("userMessage", item)
        }
    }
}
</script>